<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>可用余额</title>
		<link rel="stylesheet" type="text/css" href="$!rc.contextPath/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="$!rc.contextPath/common/LCalendar.css" />
		<link rel="stylesheet" href="//at.alicdn.com/t/font_604979_ninvlbwinz71ra4i.css" />
		<link rel="stylesheet" type="text/css" href="$!rc.contextPath/css/income.css"/>
		<link rel="stylesheet" href="$!rc.contextPath/common/dropload.css" />
	</head>
	<body>
		<!--顶部-->
		<div class="top">
			<header>
				<div><a href="JavaScript:history.back(-1)"><i class="iconfont icon-fanhui"></i></a></div>
				<div>可用余额</div>
				<div></div>
			</header>
			<div class="balance">
				<!--今日收益-->
				<div class="balance-text">
					可用余额
				</div>
				<!--收益的钱-->
				<div class="profit-total">
					<span class="profit-total-number">$!member.availableBalance</span>
					<span><a href="$!rc.contextPath/orderView/withdraw">提现</a> </span>
				</div>
			</div>
		</div>
		<a href="javascript:;" class="income-time">
			<input type="text" name="date" id="date" placeholder="2017-12" readonly="readonly"/>
			<i class="iconfont icon-rili"></i>
		</a>
		<!--主体内容-->
		<article>
			<div class="content">
			<!--详细账单-->
				<ul class="income-details lists">
					
				</ul>
			</div>
		</article>
	</body>
	<script src="$!rc.contextPath/common/jquery-1.8.3.min.js"></script> 	
	<script src="$!rc.contextPath/js/LCalendar.js" type="text/javascript"></script>
	<script src="$!rc.contextPath/common/dropload.min.js"></script>
	<script type="text/javascript">
		$("article").css("margin-top",$(".top").height()+$(".income-time").height());
		$(".income-time").css("top",$(".top").height());
	</script>
	<script type="text/javascript">
		$(function(){
			var calendar = new LCalendar();
			calendar.init({
				'trigger': '#date', //标签id
				'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
				'minDate': (new Date().getFullYear()-10) + '-' + 1 + '-' + 1, //最小日期
				'maxDate': (new Date().getFullYear()) + '-' + 12 + '-' + 31 //最大日期
			});
			
			//获取当前时间
			var now = new Date();//获取系统当前时间
			var year = now.getFullYear(); //获取完整的年份(4位,1970-????)
			var mth = now.getMonth() + 1; //获取当前月份(0-11,0代表1月)
			if (mth >= 1 && mth <= 9) {
				mth = "0" + mth;
	        }
			$("#date").attr("placeholder", year + "-" + mth);
			f_init(year + "-" + mth);
		})
	
		function f_init(month){
			$(".lists").empty();
			$(".dropload-down").remove();
			
			var counter = 0;
		    // 每页展示4个
		    var num = 10;
		    var pageStart = 0,pageEnd = 0;
		
		    // dropload
		    $('.content').dropload({
		        scrollArea : window,
		        domUp : {
		            domClass   : 'dropload-up',
		            domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
		            domUpdate  : '<div class="dropload-update">↑释放更新</div>',
		            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
		        },
		        domDown : {
		            domClass   : 'dropload-down',
		            domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
		            domLoad    : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
		            domNoData  : '<div class="dropload-noData">~没有更多收益了~</div>'
		        },
		        loadDownFn : function(me){
		            $.ajax({
		                type: 'POST',
		                url: '$!rc.contextPath/order/incomeList',
		                data : {
		                	startIndex : pageStart,
		                	pageSize : num,
		                	month : month,
		                	incomeType : 1
		                },
		                dataType: 'json',
		                success: function(data){
		                    var result = '';
		                    counter++;
		                    pageEnd = num * counter;
		                    pageStart += num;
		                    if(data.code == '0'){
		                    	var list = data.data;
		                    	console.log(list);
		                    	for(var i = 0; i < list.length; i++){
			                        result += '<li><div class="income-details-left"><div class="income-details-left-information"><p class="income-name">收益</p>' + 
			                        			'<p class="income-time"><em>时间：</em><strong>' + list[i].add_time + '</strong></p></div></div><div class="income-details-right">' + 
			                        			'<span class="ifincome">+</span><span class="income-number">' + list[i].income_money + '</span></div></li>';
			                        
		                    	}
		                    	
		                    	if(list.length < 10){
		                            // 再往下已经没有数据
		                            // 锁定
		                            me.lock();
		                            // 显示无数据
		                            me.noData();
		                            //break;
		                        }
		                    }
		
	                        $('.lists').append(result);
	                        // 每次数据加载完，必须重置
	                        me.resetload();
		                },
		                error: function(xhr, type){
		                    alert('网络故障!');
		                    // 即使加载出错，也得重置
		                    me.resetload();
		                }
		            });
		        },
		        threshold : 50
		    });
		}
	</script>
</html>
